<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-stack
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // left: 'left',
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        grid: {
            // left: '3%',
            // right: '4%',
            // bottom: '3%',
            // containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            name: '红',
            // boundaryGap: false,
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35']
        },
        yAxis: {
            // type: 'value'
            name: '蓝',
            type: 'value',
            min: 30,
            max: 100,
            minorTick: {
                show: true,
                splitNumber: 5
            }
            ,
            minorSplitLine: {
                show: true
            }
        },
        series: [
            {
                name: '01',
                type: 'line',

                data: [48, 64, 62, 49, 51, 50, 56, 55, 51, 54, 50, 55, 51, 52, 50, 43, 58, 50, 56, 46, 59, 66, 59, 51, 59, 46, 56, 47, 57, 76, 47, 70, 77, 59, 80]
            },
            {
                name: '02',
                type: 'line',

                data: [58, 60, 62, 63, 58, 63, 55, 54, 60, 42, 68, 62, 73, 65, 45, 54, 59, 51, 78, 51, 53, 72, 65, 57, 69, 61, 57, 63, 67, 70, 55, 67, 58, 57, 73]
            },
            {
                name: '03',
                type: 'line',

                data: [69, 57, 55, 50, 62, 63, 74, 56, 49, 62, 66, 51, 51, 58, 54, 53, 58, 54, 65, 59, 47, 61, 57, 43, 58, 47, 65, 57, 65, 75, 58, 73, 82, 63, 63]
            }, {
                name: '04',
                type: 'line',

                data: [69, 54, 66, 52, 63, 54, 65, 50, 53, 62, 51, 50, 53, 51, 59, 59, 52, 45, 54, 56, 60, 64, 58, 63, 66, 47, 57, 59, 82, 65, 55, 67, 65, 62, 57]
            }, {
                name: '05',
                type: 'line',
                stack: 'Total',
                data: [63, 76, 62, 59, 55, 51, 60, 60, 60, 64, 74, 58, 54, 61, 58, 45, 46, 60, 61, 61, 58, 80, 56, 52, 49, 60, 58, 58, 80, 64, 65, 74, 69, 58, 76]
            }, {
                name: '06',
                type: 'line',

                data: [60, 53, 59, 61, 56, 60, 49, 58, 55, 52, 53, 52, 48, 56, 47, 48, 59, 62, 64, 62, 65, 51, 62, 56, 45, 70, 76, 51, 74, 74, 65, 64, 65, 69, 59]
            }, {
                name: '07',
                type: 'line',

                data: [65, 72, 66, 52, 69, 63, 61, 60, 53, 65, 68, 61, 57, 66, 50, 54, 62, 67, 58, 65, 67, 65, 57, 62, 73, 73, 54, 63, 62, 76, 70, 75, 76, 67, 81]
            }, {
                name: '08',
                type: 'line',

                data: [47, 49, 48, 52, 60, 55, 64, 62, 53, 52, 62, 47, 56, 55, 60, 39, 53, 59, 56, 49, 53, 56, 52, 42, 50, 48, 57, 57, 73, 64, 59, 67, 70, 53, 61]
            }, {
                name: '09',
                type: 'line',

                data: [73, 62, 71, 57, 63, 63, 50, 42, 60, 54, 55, 45, 57, 48, 62, 59, 57, 53, 61, 59, 51, 67, 57, 54, 68, 51, 55, 43, 64, 73, 75, 68, 77, 76, 75]
            }, {
                name: '10',
                type: 'line',

                data: [70, 61, 55, 46, 66, 52, 87, 56, 60, 58, 63, 48, 59, 74, 67, 48, 66, 71, 55, 71, 56, 63, 69, 60, 63, 60, 55, 64, 81, 70, 76, 79, 85, 69, 92]
            }, {
                name: '11',
                type: 'line',

                data: [63, 48, 52, 63, 70, 74, 64, 53, 52, 56, 62, 59, 61, 49, 58, 53, 56, 58, 60, 66, 54, 68, 58, 48, 64, 53, 55, 57, 95, 58, 68, 63, 72, 64, 81]
            }, {
                name: '12',
                type: 'line',

                data: [73, 66, 68, 50, 63, 60, 71, 58, 58, 59, 64, 66, 54, 45, 44, 43, 54, 58, 76, 59, 39, 67, 62, 64, 66, 72, 61, 69, 74, 79, 69, 67, 72, 85, 70]
            }

        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>